<template>
	<view class="content">
		<view class="list">
		    <view 
			 v-for="(examInfo, index) in studentExamList"
			 :key="index" class="item" >
				<view class="top">
					<text class="title">{{examInfo.testPaperInfoName}}</text>
				</view>
				<view class="bottom">
					<text class="level">
						<uni-tag 
						  :inverted="true"
						  type="error"
						  :text="examInfo.subjectName" ></uni-tag>
						<uni-tag 
						 style="margin: 8px;"
						 :inverted="true"
						 :text="examInfo.createDate" ></uni-tag>
					</text>
					
					<button @click="goExamDetail(examInfo.id)" class="handle-btn analysis-btn">查看解析</button>
				</view>
			</view>		
		</view>
		<uni-load-more 
		 :status="status" 
		 :icon-size="16" 
		 :content-text="contentText" />
	</view>
</template>

<script>
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	export default {
		components: {uniTag},
		data() {
			return {
				studentExamList: [],
				pageNumber: 1,
				pageSize: 10,
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '数据加载中',
					contentnomore: '亲, 没有更多数据啦'
				},
			}
		},
		
		onLoad() {
			this.getExamInfoList()
		},
		
		computed: {
			
		},
		
		methods: {	
			getExamInfoList () {
				this.$httpApi.get('/student/exam', {
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				}).then(res => {
				  this.studentExamList = res.data.dataList
				  if (this.studentExamList.length === 0
				  || this.studentExamList.length < this.pageSize) {
				  	this.status = 'noMore'
				  }
				})
			},
			
			goExamDetail (examInfoId) {
				uni.navigateTo({
					url: '../paper/examDetail?examInfoId=' + examInfoId
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
	}
	.list {
		width: 100%;
	}
	.item {
		width: 100%;
		height: 160rpx;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		
		border-bottom: 1px solid #D0D0D0;
	}
	.top {
		width: 100%;
		flex-direction: row;
		
		align-items: center;
		height: 60rpx;
		padding: 0 20rpx;
	}
	.type {
		color: #29B581;
		font-size: 32rpx;
	}
	.title {
		color: #1A1A1A;
		font-size: 32rpx;
		margin-left: 20rpx;
	}
	.pay {
		width: 32rpx;
		height: 40rpx;
		margin-left: 20rpx;
		top: 8rpx;
		position: relative;
	}
	.bottom {
		display: flex;
		flex-direction: row;
		height: 60rpx;
		align-items: center;
		margin-top: 20rpx;
	}
	.level {
		flex: 1;
		color: #1A1A1A;
		margin-left: 20rpx;
		font-size: 26rpx;
	}
	.handle-btn {
		border-radius: 30rpx;
		border-color: #ed675a;
		border-width: 2rpx;
		border-style: solid;		
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #ed675a;
		background-color: #FFFFFF;
		font-size: 26rpx;
		margin-right: 20rpx;
	}
</style>
